<template>
    <div>
         <van-nav-bar
            title="用户登录"
            left-text="返回"
            left-arrow
            @click-left="goBack"
            />
        <div class="register-panel">
            <van-field
                v-model="username"
                label="用户名"
                icon="clear"
                placeholder="请输入用户名"
                required
                @click-icon="username = ''"
                :error-message="usernameErrorMsg"
            />
            <van-field
                v-model="password"
                type="password"
                label="密码"
                placeholder="请输入密码"
                :error-message="passwordErrorMsg"
                required
            />
            <div class="register-button">
                <van-button type="primary" @click="LoginAction" :loading="openLoading" size="large">登录</van-button>
            </div>
       </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import url from '@/serviceAPI.config.js'
    import { Toast } from 'vant'
    export default {
        data() {
            return {
                username: '',
                password: '',
                openLoading: false,    //是否开启用户的Loading
                usernameErrorMsg:'',   //当用户名出现错误的时候
                passwordErrorMsg:'',   //当密码出现错误的时候
            }
        },
        created(){
          // 验证用户本地是否有缓存，有的话，直接显示为已经登录
          if(localStorage.userInfo){
            Toast.success('您已经登录')
            this.$router.push('/')
          }
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            //*****注册用户的实行方法*****
            LoginAction(){
                this.checkForm() && this.axiosLoginUser()
            },
            //*******axios登录方法*******
            axiosLoginUser(){
                    //先把按钮进行loading状态，防止重复提交
                    this.openLoading = true
                    console.log('经过这里',url.login);
                axios({
                    url: url.login,
                    method: 'post',
                    data:{
                        userName:this.username,
                        password:this.password
                    }
                })
                .then(res => {
                  console.log(res)
                    //如果返回code为200，
                    if(res.data.code==200){

                      if(res.data.message=='用户名不存在'){
                        Toast.fail('用户名不存在')
                        this.openLoading=false
                        return;
                      }

                      // 保存用户登录状态 -->感觉这样做很不合理
                      // new Promise((reslove,reject)=>{
                      //               //键        值
                      //   localStorage.userInfo=JSON.stringify({userName:this.username}) //这种方式存储本地
                      //   setTimeout(()=>{reslove()},500)
                      // }).then(()=>{
                      //   Toast.success('登录成功')
                      //   this.openLoading=false
                      //   this.$router.push('/') //登录成功后跳转到个人中心页面，这里暂时跳转首页
                      // }).catch(err=>{
                      //   Toast.fail('登录状态保存失败')
                      //   console.log(err)
                      // })

                      if(res.data.message){
                        Toast.success('登录成功')
                        this.openLoading=false
                        this.$router.push('/') //登录成功后跳转到个人中心页面，这里暂时跳转首页
                      }else{
                        Toast.fail('密码错误')
                        this.openLoading=false
                      }

                    }else{
                      console.log(res.data.message)
                      Toast.fail('登录失败')
                      this.openLoading=false
                    }
                })
                .catch((error) => {
                  console.log(error)
                  Toast.fail('登录失败')
                  this.openLoading=false
                })
            },
            //**** 客户端验证
            checkForm(){
                let isOk= true
                if(this.username.length<5){
                    this.usernameErrorMsg="用户名不能小于5位"
                    isOk= false
                }else{
                    this.usernameErrorMsg=''
                }
                if(this.password.length<6){
                    this.passwordErrorMsg="密码不能少于6位"
                    isOk= false
                }else{
                    this.passwordErrorMsg=''
                }
                return isOk
            }
        },
    }
</script>
<style scoped>
    .register-panel{
        width:96%;
        border-radius: 5px;
        margin:20px auto;
        padding-bottom:50px;
    }
    .register-button{
        padding-top:10px;
    }
</style>
